<template>
  <div class="app-container">
    <el-page-header
      @back="goBack"
      content="人员管理"
      style="margin-bottom: 10px"
    >
    </el-page-header>
    <el-card class="box-card">
      <div>
        <el-radio
          v-model="SystemName"
          :label="ele.SystemName_en"
          v-for="ele in SystemList"
          >{{ ele.SystemName_zh }}</el-radio
        >
      </div>
      <el-divider></el-divider>
      <div>
        <span style="font-weight: bold"> {{ SystemName }}(系统权限):</span>
        <el-select v-model="value" style="margin: 0px 20px">
          <el-option
            v-for="item in RoleOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button size="small" type="success" @click="handleSave"
          >保存</el-button
        >
      </div>
      <el-divider></el-divider>
      <el-descriptions title="用户信息" border :column="4">
        <el-descriptions-item label="登录账号">{{
          UserInfo.Account
        }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{
          UserInfo.UName
        }}</el-descriptions-item>
        <el-descriptions-item label="职位">{{
          UserInfo.UPost
        }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{
          UserInfo.UDept
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{
          UserInfo.Phone
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          UserInfo.Email
        }}</el-descriptions-item>
        <el-descriptions-item label="上级">{{
          UserInfo.Superior
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          UserInfo.Remark
        }}</el-descriptions-item>
        <el-descriptions-item label="系统权限">
          <!-- <div v-for="item in UserInfo.SysPerValue">
                    {{ UserInfo.SysPerValue[item] }}</div> -->
          {{ UserInfo.SysPerValue }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  reqGetUserInfoByUID,
  reqGetSystemList,
  reqGetSystemRoles,
  reqUpdateUserInfo1,
  reqDeleteUserInfo1,
  reqUpdateSysPerValue,
} from "@/api/newApi/SystemManage/UserApi";
export default {
  name: "AssignPer",
  data() {
    return {
      RouteInfo: {},
      SysPerValue: {},
      SystemName: SystemName,
      SystemList: [],
      RoleOpts: [],
      UserInfo: {},
      value: undefined,
    };
  },
  watch: {
    SystemName(newV, oldV) {
      reqGetSystemRoles(newV).then((res) => {
        this.RoleOpts = res.rows;
        this.value = this.SysPerValue[newV]
          ? this.SysPerValue[newV]["Permisson"]
          : undefined;
      });
    },
  },
  computed: {
    ...mapGetters(["account"]),
  },
  mounted() {
    //防止非admin复制url进入
    if (this.account != "admin") {
      this.$router.push("/404");
    } else {
      reqGetSystemList().then((res) => {
        this.SystemList = res.rows;
      });
      this.RouteInfo = this.$route.query;
      this.getInfo();
    }
  },
  methods: {
    handleSave() {
      if (this.value) {
        reqUpdateSysPerValue(
          this.RouteInfo.UID,
          JSON.stringify({
            ...this.SysPerValue,
            [this.SystemName]: {
              Permisson: this.value,
            },
          })
        ).then((res) => {
          this.$message.success("保存成功");
          this.getInfo();
        });
      } else {
        this.$message.error("未选择数据");
      }
    },
    getInfo() {
      reqGetUserInfoByUID(this.RouteInfo.UID).then((res1) => {
        this.UserInfo = res1.data;
        this.SysPerValue = res1.data.SysPerValue ? res1.data.SysPerValue : {};
        reqGetSystemRoles(this.SystemName).then((res2) => {
          this.RoleOpts = res2.rows;
          this.value = this.SysPerValue[this.SystemName]
            ? this.SysPerValue[this.SystemName]["Permisson"]
            : undefined;
        });
      });
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>